<template>
  <div class="searchShop">
    <div class="title">商品</div>

    <ul>
       <li class="clearFix shop" v-for="item in searchProduct" v-on:click="gotoAddress('/shop/details/'+item.product_id)">
         <div class="icon fl">
           <img  :src="item.image"/>

         </div>
         <div class="goods fl">
           <p>{{item.product_name}}</p>
           <p>￥{{item.price}}</p>
         </div>
       </li>
       <!--<li class="clearFix shop">-->
         <!--<img class="icon fl" src="https://dummyimage.com/90x90"/>-->
         <!--<div class="goods fl">-->
           <!--<p>【9.9新】GUCCI 斜挎包</p>-->
           <!--<p>￥8,800.00</p>-->
         <!--</div>-->
       <!--</li>-->
     </ul>
    <div class="next-btn" v-if="showMore">
      <mt-button type="danger" size="large" @click="addMoreGoods">加载更多</mt-button>
    </div>
		<!--<div class="next-btn" v-if="!haveDate">-->
      <!--<mt-button type="danger" size="large" disabled>无更多数据</mt-button>-->
    <!--</div>-->
    <div class="no-result" v-if="haveList">
      <div class="no">
        <img src="../../assets/search/a5.png" alt="" />
      </div>
      <div class="no-text">没有相关信息</div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'


  export default {
  name: 'SearchShop',
  data () {
    return {
      haveList:false,
      searchProduct:[],
      curPage:1,
      haveDate:true,
      showMore:false
    }
  },
  mounted:function() {
    this.initData(this.curPage)
  },
  methods: {
  	addMoreGoods(){
  		this.curPage++
  		this.initData(this.curPage)
  	},
    initData:function(curPage){
      //alert(this.$route.query.keyword);
      var _this = this;
      //hotSearch
      var ajaxData = {};
      ajaxData.keyword = this.$route.query.keyword;
      ajaxData.type = this.$route.query.type;
      ajaxData.page = curPage;
      $.ajax({
        type:'post',
        url: RouteMap.searchArticle,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            if(curPage < res.data.maxpage){
              _this.showMore = true;
            }

            if(res.data.list.length==0 || curPage == res.data.maxpage){

              _this.showMore = false;
            }

          	if(!utilities.isNull(res.data.list)){
          		if(curPage <= res.data.maxpage){
          			_this.haveDate = true;
          			_this.searchProduct = _this.searchProduct.concat(res.data.list);
          		}else{
          			_this.haveDate = false;
          		}
          	}else{
          		_this.haveDate = false;
          	}

//            if(_this.searchArticle.length>0){
//              _this.haveList = true;
//            }
//            else{
//              $('.no-result').show();
//            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    gotoAddress(path){
      this.$router.push(path)
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .searchShop{background:#fff; padding-top: 0.5rem;}


  .shop{
        width:100%;
        box-sizing:border-box;
        padding:.4rem 0 .4rem 1.3rem;
        border-bottom: 1px solid #eee;
  }
  .shop .icon{
        width:2.5rem;
        /*height:3rem;*/
  }
  .shop .icon img{
        width:100%;
  }
  .shop .goods{
        line-height:1.2rem;
        padding-left:.7rem;
      width:10rem;
    color:#707070;
  }
  .next-btn{
    padding: 0 0.5rem;
    padding-bottom: 2rem;
    margin-top: 1rem;
  }


  .no-result{
    text-align: center;
    color: #dedede;
    font-size: 0.5rem;
    padding: 6rem 0;
  }
  .no-result .no img{
    width: 2rem;
    padding-bottom: .5rem;
  }
  .title{
    border-bottom: 1px solid #eee;
    padding: 0.4rem 0.5rem .4rem 1.3rem;
    font-size:.65rem;
    color: #b01f24;
  }

</style>
